<template>
  <div class="lg-container" v-wechat-title="appTitle">
    <div v-if="isLoading" class="load-container">
      <i class="lg-icon-loading lg-mescroll-rotate"></i>
      <span>加载中 ...</span>
    </div>
    <template v-else>
      <h5 class="lg-title">{{title}}</h5>
      <fm-generate-form
        v-if="widgetForm.list.length > 0 && type === 1"
        ref="generateForm"
        insite="true"
        :data="widgetForm"
        :value="widgetModels"
        :remote="remoteFuncs"
      />
      <div v-else-if="content !== '' && type === 2" v-html="content" />
      <div v-if="lgnullFlag" id="lgNullData">暂无数据，请告知医生</div>
      <div v-if="analysisResult" class="analysisBox">
        <span>统计分析：</span>
        <span>{{analysisResult}}</span>
      </div>
    </template>
  </div>
</template>
<script>
import { read } from '@/api/common'
export default {
  data () {
    return {
      apiUri1: 'AppFollowupSolutionNodeItem',
      apiUri2: 'AppPlanNodeItem',
      content: '',
      title: '',
      appTitle: '加载中...',
      widgetForm: {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: 'right',
          size: 'small'
        }
      },
      isLoading: true,
      lgnullFlag: false,
      type: 0,
      name: '',
      widgetModels: {},
      remoteFuncs: {},
      isPlan: 0,
      resultArr: [],
      analysisResult: '',
      analysisList: []
    }
  },
  created () {
    const rem = document.documentElement.clientWidth / 750 * 20
    document.documentElement.style.fontSize = rem + 'px'
  },
  mounted () {
    this.isPlan = parseInt(this.$route.query.isPlan)
    if (this.isPlan === 0) {
      this.getSolution()
    } else {
      this.getPlan()
    }
  },
  methods: {
    getPlan () {
      read(this.apiUri2, parseInt(this.$route.query.id)).then(res => {
        if (res.code === 200) {
          setTimeout(() => {
            this.isLoading = false
          }, 500)
          if (res.info) {
            this.title = res.info.name
            this.type = res.info.type
            if (this.type === 1) {
              this.appTitle = '量表详情'
              if (res.info.content) {
                this.widgetForm = JSON.parse(res.info.content)
                this.widgetForm.list.map(v => {
                  v.options.disabled = true
                })
              } else {
                this.lgnullFlag = true
              }
            } else {
              this.appTitle = '宣教详情'
              if (res.info.content) {
                this.content = res.info.content
              } else {
                this.lgnullFlag = true
              }
            }
            if (res.info.answer) {
              this.widgetModels = JSON.parse(res.info.answer)
              if (res.info.isScore) {
                this.analysisList = JSON.parse(res.info.analysisResult)
                this.statisticalPointso()
              }
            }
          }
        }
      })
    },
    getSolution () {
      read(this.apiUri1, parseInt(this.$route.query.id)).then(res => {
        if (res.code === 200) {
          setTimeout(() => {
            this.isLoading = false
          }, 500)
          if (res.info) {
            this.title = res.info.name
            this.type = parseInt(res.info.templateType)
            if (this.type === 1) {
              this.appTitle = '量表详情'
              if (res.info.content) {
                this.widgetForm = JSON.parse(res.info.content)
                this.widgetForm.list.map(v => {
                  v.options.disabled = true
                })
              }
            } else {
              this.appTitle = '宣教详情'
              this.content = res.info.content
            }
          }
        }
      })
    },
    statisticalPointso () {
      const selectArr = []
      // 获取所有单选、下拉框的选择项及结果
      this.widgetForm.list.map((v, i) => {
        if (v.type === 'select' || v.type === 'radio') {
          for (const key in this.widgetModels) {
            if (this.widgetModels.hasOwnProperty(key)) {
              if (v.model === key) {
                selectArr.push({
                  type: v.type,
                  model: v.model,
                  options: v.options.options,
                  result: this.widgetModels[key],
                  resultObj: {}
                })
              }
            }
          }
        }
        if (v.type === 'checkbox') {
          for (const key in this.widgetModels) {
            if (this.widgetModels.hasOwnProperty(key)) {
              if (v.model === key) {
                selectArr.push({
                  type: v.type,
                  model: v.model,
                  options: v.options.options,
                  result: this.widgetModels[key],
                  resultObj: []
                })
              }
            }
          }
        }
      })
      selectArr.map(v => {
        if (v.type === 'checkbox') {
          v.options.map(e => {
            if (v.result.includes(e.value)) {
              v.resultObj.push({
                score: e.score,
                isAbnormal: e.isAbnormal,
                introduce: e.introduce
              })
            }
          })
        } else {
          v.options.map(e => {
            if (e.value === v.result) {
              v.resultObj = {
                score: e.score,
                isAbnormal: e.isAbnormal,
                introduce: e.introduce
              }
            }
          })
        }
      })
      this.resultArr = selectArr
      this.handlerResult()
    },
    handlerResult () {
      let sum = 0
      this.resultArr.map(v => {
        if (v.type === 'checkbox') {
          v.resultObj.map(e => {
            sum += e.score
          })
        } else {
          sum += v.resultObj.score
        }
      })
      this.analysisList.map(v => {
        if (v.min <= sum && v.max >= sum) {
          this.analysisResult = v.content
        }
      })
    }
  }
}
</script>
<style lang="scss">
.el-radio,
.el-checkbox,
.el-input {
  white-space: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.3rem !important;
}
</style>
<style lang="scss" scoped>
.lg-title {
  font-size: 1.5rem !important;
  color: #111111;
  text-align: center;
  line-height: 26px;
  margin: 0 0 20px;
  padding: 0 30px;
}
// 空数据
#lgNullData {
  display: inline-block;
  width: 100%;
  color: #666666;
  font-size: 14px;
}
// 统计分析结果
.analysisBox {
  span {
    font-size: 14px;
    color: #333;
  }
}
.lg-container {
  padding: 20px;
  background-color: #fff;
  width: 100%;
  overflow: auto;
  min-height: 100vh;
  div,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  pre,
  code,
  form,
  fieldset,
  legend,
  input,
  textarea,
  p,
  blockquote,
  th,
  td,
  hr,
  button,
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    font-size: 1.3rem !important;
  }
  .load-container {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    .lg-icon-loading {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid gray;
      border-bottom-color: transparent;
      vertical-align: middle;
    }
    .lg-mescroll-rotate {
      -webkit-animation: mescrollRotate 0.6s linear infinite;
      animation: mescrollRotate 0.6s linear infinite;
    }
    span {
      color: gray;
      font-size: 14px;
      margin-left: 5px;
    }
  }
}
@-webkit-keyframes mescrollRotate {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes mescrollRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
